import { getGeneratePic, loginWithPass, type ILoginParams } from '@/api/common';
import { useUserStore } from '@/store';
import { rsaEncrypt } from '@/utils/rsa';
import { useRequest } from '@ac/hooks';
import { uuid } from '@ac/utils';
import { LockOutlined, MobileOutlined, SafetyOutlined } from '@ant-design/icons';
import { Button, Form, Input, message, type FormProps } from 'antd';
import to from 'await-to-js';
import { useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';

const AccountLogin: React.FC = () => {
	const navigator = useNavigate();
	const { loading, run: loginTrigger } = useRequest(loginWithPass);
	const [checkcodeKey, setCheckcodeKey] = useState(uuid());
	const setUserInfo = useUserStore(state => state.setUserInfo);

	/**
	 * @description: 生成图片验证码
	 * @returns {string}
	 */
	const validateImg = useMemo(() => {
		return getGeneratePic({
			checkcode: checkcodeKey
		});
	}, [checkcodeKey]);

	/**
	 * @description 提交登录表单
	 * @param {ILoginParams} values 表单数据
	 * @returns {Promise<void>}
	 */
	const onFinish: FormProps<ILoginParams>['onFinish'] = async values => {
		const [_err, res] = await to(
			loginTrigger({
				...values,
				checkcodeKey,
				userPass: rsaEncrypt(values.userPass)
			})
		);
		if (res) {
			message.success('登录成功');
			setUserInfo(res.result);
			navigator('/my-research');
		} else {
			setCheckcodeKey(uuid());
		}
	};

	return (
		<div className="w-440 h-460 shadow-[0_0_20px_#f1f1f1] bg-#fff rounded-[6px]">
			<h1 className="text-24 font-bold text-#333 m-t-48 text-center">您好，请登录</h1>
			<Form
				initialValues={{ remember: true }}
				autoComplete="off"
				onFinish={onFinish}
				className="p-x-40 p-y-20 p-t-30">
				<Form.Item name="userName" rules={[{ required: true, message: '请输入手机号/账号' }]}>
					<Input
						prefix={<MobileOutlined className="text-#666 m-r-8 font-bold" />}
						placeholder="请输入手机号/账号"
						size="large"
						allowClear
						className="text-14"
					/>
				</Form.Item>
				<Form.Item name="userPass" rules={[{ required: true, message: '请输入登录密码' }]}>
					<Input.Password
						prefix={<LockOutlined className="text-#666 m-r-8 font-bold" />}
						placeholder="请输入登录密码"
						size="large"
						allowClear
						className="text-14"
					/>
				</Form.Item>
				<Form.Item>
					<div className="flex justify-between">
						<Form.Item
							name="vcode"
							noStyle
							rules={[{ required: true, message: '请输入图文验证码' }]}>
							<Input
								prefix={<SafetyOutlined className="text-#666 m-r-8 font-bold" />}
								placeholder="请输入图文验证码"
								size="large"
								allowClear
								className="w-220 text-14"
							/>
						</Form.Item>
						<div className="w-120 h-40" onClick={() => setCheckcodeKey(uuid())}>
							<img className="wh-full" src={validateImg} />
						</div>
					</div>
				</Form.Item>

				<Form.Item>
					<Button
						type="primary"
						htmlType="submit"
						className="w-full"
						size="large"
						loading={loading}>
						登录
					</Button>
				</Form.Item>
				<div className="flex justify-between">
					<div className="">
						<span>没有帐号?</span>
						<Button type="link" size="small">
							立即注册
						</Button>
					</div>
					<Button type="link" size="small">
						忘记密码?
					</Button>
				</div>
			</Form>
		</div>
	);
};

export default AccountLogin;
